<template>
  <div class="p-4 h-full box-border overflow-hidden bg-gray-100">
    <el-row :gutter="15">
      <el-col :xs="24" :sm="12" :md="12" :lg="6" :xl="6" v-for="(item, index) in heroList" :key="item.heroId">
        <div class="flex">
          <div
            class="w-full hover:shadow-lg hover:duration-300 p-5 box-border bg-white border border-solid border-gray-100 rounded-md flex justify-between items-center mb-4"
          >
            <div class="text-gray-800" :class="`home-animation${index}`">
              <div class="text-lg font-bold mb-2">{{ item.name }}&nbsp;{{ item.title }}</div>
              <el-tag v-for="(v, i) in item.tag" :key="i" type="warning" effect="dark" class="mr-1 mb-2"> {{ v }}</el-tag>
              <div class="text-gray-600 mb-1">
                <span class="v-font-14">胜率:</span>&nbsp;<span class="text-base text-green-600 font-bold">{{ item.winRate }}</span>
              </div>
              <div class="text-gray-600 mb-1">
                <span class="text-sm">禁用率:</span>&nbsp;<span class="text-base text-red-600 font-bold">{{ item.banRate }}</span>
              </div>

              <div class="text-gray-600 flex items-center">
                <span class="text-sm">难度:&nbsp;</span>
                <MyImg name="ele-StarFilled" color="#E6A23C" v-for="(star, j) in item.difficultLevel" :key="j"></MyImg>
              </div>
            </div>
            <el-image :class="`home-animation${index}`" :src="item.avatar" style="width: 80px; height: 80px" />
          </div>
        </div>
      </el-col>
    </el-row>

    <el-row :gutter="15" class="mb-5">
      <el-col :xs="24" :sm="14" :md="14" :lg="16" :xl="16" class="mb-5 md:mb-0">
        <div
          class="w-full hover:shadow-lg hover:duration-300 p-5 box-border bg-white border border-solid border-gray-100 rounded-md"
          style="height: 400px"
        >
          <!-- 折线图 -->
          <echartAppearRateLine />
        </div>
      </el-col>
      <el-col :xs="24" :sm="10" :md="10" :lg="8" :xl="8" class="home-media">
        <div
          class="w-full hover:shadow-lg hover:duration-300 p-5 box-border bg-white border border-solid border-gray-100 rounded-md"
          style="height: 400px"
        >
          <!-- 优劣势对线 -->
          <homeAlignment />
        </div>
      </el-col>
    </el-row>

    <el-row :gutter="15">
      <el-col :xs="24" :sm="10" :md="10" :lg="8" :xl="8" class="mb-5 md:mb-0">
        <div
          class="w-full hover:shadow-lg hover:duration-300 p-5 box-border bg-white border border-solid border-gray-100 rounded-md"
          style="height: 400px"
        >
          <!-- 雷达图 -->
          <echartHeroRadar />
        </div>
      </el-col>
      <el-col :xs="24" :sm="14" :md="14" :lg="16" :xl="16" class="home-media">
        <div
          class="w-full hover:shadow-lg hover:duration-300 p-5 box-border bg-white border border-solid border-gray-100 rounded-md"
          style="height: 400px"
        >
          <!-- 柱状图 -->
          <echartHeroBar />
        </div>
      </el-col>
    </el-row>
  </div>
</template>

<script setup lang="ts">
interface heroType {
  heroId: string;
  name: string;
  title: string;
  avatar: string;
  tag: string[];
  difficultLevel: number;
  winRate: string;
  banRate: string;
}

// 第一行四个英雄卡片
const heroList = reactive<Array<heroType>>([
  {
    heroId: '1',
    name: '破败之王',
    title: '佛耶戈',
    avatar: 'https://game.gtimg.cn/images/lol/act/img/champion/Viego.png',
    tag: ['刺客', '战士'],
    difficultLevel: 3,
    winRate: '61.39%',
    banRate: '9.83%',
  },
  {
    heroId: '2',
    name: '法外狂徒',
    title: '男枪',
    avatar: 'https://game.gtimg.cn/images/lol/act/img/champion/Graves.png',
    tag: ['射手'],
    difficultLevel: 2,
    winRate: '58.59%',
    banRate: '36.19%',
  },
  {
    heroId: '3',
    name: '圣枪游侠',
    title: '卢锡安',
    avatar: 'https://game.gtimg.cn/images/lol/act/img/champion/Lucian.png',
    tag: ['射手'],
    difficultLevel: 2,
    winRate: '60.98%',
    banRate: '8.08%',
  },
  {
    heroId: '4',
    name: '解脱者',
    title: '塞拉斯',
    avatar: 'https://game.gtimg.cn/images/lol/act/img/champion/Sylas.png',
    tag: ['法师', '刺客'],
    difficultLevel: 3,
    winRate: '50.37%',
    banRate: '11.06%',
  },
]);
</script>

<style scoped lang="scss">
@for $i from 0 through 3 {
  .home-animation#{$i} {
    opacity: 0;
    animation-name: bottom2TopOpacity;
    animation-duration: 0.5s;
    animation-fill-mode: forwards;
    animation-delay: calc($i/10) + s;
  }
}
</style>
